<template>
  <view class="page">
    <view class="row">
      <view class="label">地址</view>
      <view class="content" @click="onChoose">
        <!-- <text class="c-ccc">请选择地址</text> -->
        <input v-model="state.address" readonly placeholder="请选择地址" />
      </view>
    </view>

    <view class="row">
      <view class="label">类型</view>
      <view class="content">
        <radio-group @change="onTypeChange">
          <radio value="buy" :checked="state.type === 'buy'">买</radio>
          <radio value="sell" :checked="state.type === 'sell'">卖</radio>
        </radio-group>
      </view>
    </view>

    <view class="row">
      <view class="label">说明</view>
      <view class="content">
        <input v-model="state.message" placeholder="请输入说明" />
      </view>
    </view>

    <view class="row">
      <view class="label">联系方式</view>
      <view class="content">
        <input v-model="state.contact" type="number" maxlength="11" placeholder="请输入联系方式" />
      </view>
    </view>

    <button class="btn" :loading="loading" @click="onSubmit">发布</button>
  </view>
</template>


<script lang="ts" setup>

import { reactive, ref, getCurrentInstance } from 'vue';
// getCurrentInstance 获取当前组件实例的 一个方法

// 获取当前组件的实例
const instance: any = getCurrentInstance()

const loading = ref(false)
const state = reactive({
  id: '',  // id
  address: "",  //地址 
  lat: 0, // 纬度
  lng: 0,  // 经度
  contact: "",  // 联系方式
  message: "",  // 信息
  type: "buy",  // 类型  给它默认 buy
})

// 勾选框改变
const onTypeChange = (event: any) => {
  console.log('onTypeChange', event.detail.value);
  state.type = event.detail.value;
}

// 选择地址
const onChoose = () => {
  uni.chooseLocation({
    // 这里设置经纬度，一打开就会显示在页面中心
    // latitude: 22.550178,
    // longitude: 113.918764,
    success: function (res) {
      console.log('地址信息：' + res);
      state.address = res.address;
      state.lat = res.latitude;
      state.lng = res.longitude;
    },
    fail: (err) => {
      console.log('err', err);
    }
  });
}

// 提交信息，可以直接集成在发布 事件里面
// const sendItem = () => {
//   uni.showLoading({
//     title: '加载中'
//   })
//   return new Promise((resolve, reject) => {
//     uni.request({
//       url: "http://localhost:3000/trades",
//       method: "POST",
//       data: {
//         "address": state.address,
//         "message": state.message,
//         "contact": state.contact,
//         "lat": state.lat,
//         "lng": state.lng,
//         "type": state.type,
//         // "openid": "",
//       },
//       success: (res) => {
//         resolve(res)
//         console.log('res', res);
//       },
//       fail: (err) => {
//         reject(err)
//         console.log('err', err);
//       },

//       complete: () => {
//         uni.hideLoading();
//       }
//     })
//   })
// }

// 发布
const onSubmit = () => {
  // console.log('发布：', state);
  // console.log('instance',instance);  


  // 校验
  if (!state.address) {
    return uni.showToast({ icon: 'none', title: '请选择地址' })
  }

  if (!state.message || !state.contact) {
    return uni.showToast({ icon: 'none', title: '请完善信息' })
  }

  if (!/^1\d{10}$/.test(state.contact)) {
    return uni.showToast({ icon: 'none', title: '请输入正确的手机号' })
  }

  loading.value = true

  // sendItem()
  // 调接口
  uni.request({
    url: 'http://localhost:3000/trades',
    method: 'POST',
    data: state,
    success: ((res) => {
      uni.showToast({
        icon: 'none', title: '发布成功'
      })
      // console.log(res);

      const eventChannel = instance.ctx.getOpenerEventChannel()
      eventChannel.emit('refresh')

      // 跳转回主页面
      uni.navigateBack()
    }),

    complete: (() => {
      loading.value = false
    })
  })
}
</script>